<template>
	<view
		class="flex align-center justify-between bg-white"
		:style="{
			width: cellSwitchWidth,
			backgroundColor: cellInputBg,
		}"
	>
		<view class="flex flex-1 align-center font-14 mar-x-15">
			<view
				class="flex align-center"
				:style="{
					width: labelWidth,
					height: cellSwitchHeight,
					fontSize: labelSize + 'px',
					borderRight: theme === 'table' ? tableBorder : 'none',
				}"
			>
				<text>{{ label }}</text>
				<text v-if="isRequire" class="mar-l-5 color-ff0000">*</text>
			</view>
			
			<view
				:style="{
					paddingLeft: theme === 'table' ? '10px' : 'none',
				}"
			>
				<u-switch
					v-model="inputValue"
					:size="size"
					:activeColor="activeColor"
					:inactiveColor="inactiveColor"
					:activeValue="activeValue"
					:inactiveValue="inactiveValue"
					:disabled="isDisabled"
					@input="handleInput"
				></u-switch>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 组件主题，默认 input 输入框
			// input：input 输入框，table 表格形式
			theme: {
				type: String,
				default: 'input'
			},
			
			// 表格线条设置，只有 theme 为 table 才有效
			tableBorder: {
				type: String,
				default: '1px #eeeeee solid'
			},
			
			// 组件宽度
			cellSwitchWidth: {
				type: String,
				default: '100%'
			},
			
			// 组件高度
			cellSwitchHeight: {
				type: String,
				default: '50px'
			},
			
			// 组件背景色
			cellInputBg: {
				type: String,
				default: '#ffffff'
			},
			
			// 标签名称
			label: {
				type: String,
				default: ''
			},
			
			// 标签宽度
			labelWidth: {
				type: String,
				default: 'auto'
			},
			
			// 标签字体大小
			labelSize: {
				type: Number,
				default: 14
			},
			
			// 是否必填
			isRequire: {
				type: Boolean,
				default: false,
			},
			
			// switch 组件大小
			size: {
				type: Number,
				default: 20
			},
			
			// 打开时的背景色
			activeColor: {
				type: String,
				default: '#3c9cff'
			},
			
			// 关闭时的背景色
			inactiveColor: {
				type: String,
				default: '#bd3124'
			},
			
			// 打开时的值
			activeValue: {
				type: String | Number | Boolean,
				default: 1
			},
			
			// 关闭时的值
			inactiveValue: {
				type: String | Number | Boolean,
				default: 0
			},
			
			// 是否禁用表单
			isDisabled: {
				type: Boolean,
				default: false
			},
			
			// 绑定的值
			value: {
				type: String | Number | Boolean,
				default: 0
			}
		},
		
		computed: {
			// 获取表单样式
			getCustomStyle () {
				return () => {
					let style = {
						width: '100%',
						height: this.inputHeight
					}
					
					return style
				}
			},
			
			getValue() {
				return () => {
					this.inputValue = this.inactiveValue
				}
			}
		},
		
		data() {
			return {
				// 绑定的值
				inputValue: 0,
			}
		},
		
		mounted() {
			// 初始化组件，回显数据
			this.inputValue = this.value
		},
		
		methods: {
			// 表单输入时的回调
			handleInput(val) {
				this.$emit('input', val)
			},
		}
	}
</script>

<style>
</style>